<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.js"></script>
    <script src="./js/highcharts.js"></script>
    <title>测试结果展示</title>
    <style>
        .container {
            margin: 0 auto;
            text-align: center
        }

        body {
            background: url(img/head.jpg);
            background-size: cover;
            /* font-family: "STXinwei"*/
        }


        .page-header {
            color: violet
        }

        .table {
            white-space: nowrap;
        }
    </style>
</head>

<body>

    <div class="page-header navbar-left">
        <h3>当前时间 :</h3>
        <h5>
            <time id="datetimenow"></time>
        </h5>
        <h3>测试时间 :</h3>
        <h5>
            <time id="testdatetime"></time>
        </h5>
    </div>

    <div id="content" class="container col-xs-6 col-md-4" >
        <div id="pie_chart" class="chart_combo"></div>
    </div>
    <div id="content" class="container col-xs-6 col-md-4" >
        <div id="pie_chart_pass" class="chart_combo"></div>
    </div>

    <div id="content" class="container"> 
        </div>

    <div id="content" class="container navbar-fixed-bottom">    
        <div>
            <a type="button" class="btn btn-info btn-lg navbar-center startbutton " id="sButton" href='#mymodal' data-toggle='modal'>
                <span class="glyphicon glyphicon-th" aria-hnameden="true"></span> 点击查看详细测试信息
            </a>
        </div>
    </div>

    <div id="mymodal" class='modal fade'>
        <div class="modal-dialog modal-default">
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading">详细信息</div>

                <!-- Table -->
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>接口名称</th>
                            <th>接口描述</th>
                            <th>测试结果</th>
                        </tr>
                    </thead>
                    <tbody id="testresult">
                        <tr class="danger">
                            <td>Tanmay</td>
                            <td>Bangalore</td>
                            <td>
                                <span class="glyphicon glyphicon-remove" aria-hnameden="true"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>Sachin</td>
                            <td>Mumbai</td>
                            <td>
                                <span class="glyphicon glyphicon-ok" aria-hnameden="true"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>Uma</td>
                            <td>Pune</td>
                            <td>
                                <span class="glyphicon glyphicon-ok" aria-hnameden="true"></span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="modal-footer">
                    <button class='btn btn-success' data-dismiss='modal'>关闭</button>
                </div>
            </div>
        </div>
    </div>


</body>
<script>
    var chart;
    $(function () {
        var totalMoney = 999;
        var zccw = 178;
        var sycw = 821
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'pie_chart',
                    plotBackgroundColor: 'antiquewhite', //背景颜色  
                    plotBorderWidth: 10,
                    plotShadow: false
                },
                title: {
                    text: "测试覆盖汇总："
                },
                subtitle: {
                    text: '总案例:' + totalMoney + '  测试:' + sycw + '    测试覆盖率：' + parseFloat(sycw *
                        100 / totalMoney).toFixed(2) + '%',
                    verticalAlign: 'bottom',
                    y: -10
                },
                tooltip: { //鼠标移动到每个饼图显示的内容  
                    pointFormat: '{point.name}: <b>{point.percentage}%</b>',
                    percentageDecimals: 1,
                    formatter: function () {
                        return this.point.name + ':' + totalMoney * this.point.percentage /
                            100;
                    }
                },
                plotOptions: {
                    pie: {
                        size: '80%',
                        borderWidth: 0,
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000',
                            distance: -50, //通过设置这个属性，将每个小饼图的显示名称和每个饼图重叠  
                            style: {
                                fontSize: '13px',
                                lineHeight: '0px',
                            },
                            formatter: function (index) {
                                return '<span style="color:#00008B;font-weight:bold ">' +
                                    this.point.name + '</span>';
                            }
                        },
                        padding: 20
                    }
                },
                series: [{ //设置每小个饼图的颜色、名称、百分比  
                    type: 'pie',
                    name: null,
                    data: [{
                            name: '未测试案例',
                            color: '#3DA9FF',
                            y: zccw
                        },
                        {
                            name: '测试案例',
                            color: '#008FE0',
                            y: sycw
                        },

                    ]
                }]
            });
        });

    });

    var chart2;
    $(function () {
        var totalMoney = 821;
        var zccw = 800;
        var sycw = 21
        $(document).ready(function () {
            chart2 = new Highcharts.Chart({
                chart: {
                    renderTo: 'pie_chart_pass',
                    plotBackgroundColor: 'antiquewhite', //背景颜色  
                    plotBorderWidth: 10,
                    plotShadow: false
                },
                title: {
                    text: "测试结果汇总："
                },
                subtitle: {
                    text: '总测试案例:' + totalMoney + '  测试成功:' + zccw + '  测试失败:' + sycw +
                        '    接口成功率：' + parseFloat(zccw * 100 / totalMoney).toFixed(2) + '%',
                    verticalAlign: 'bottom',
                    y: -10
                },
                tooltip: { //鼠标移动到每个饼图显示的内容  
                    pointFormat: '{point.name}: <b>{point.percentage}%</b>',
                    percentageDecimals: 1,
                    formatter: function () {
                        return this.point.name + ':' + totalMoney * this.point.percentage /
                            100;
                    }
                },
                plotOptions: {
                    pie: {
                        size: '80%',
                        borderWidth: 0,
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000',
                            distance: -50, //通过设置这个属性，将每个小饼图的显示名称和每个饼图重叠  
                            style: {
                                fontSize: '13px',
                                lineHeight: '0px',
                            },
                            formatter: function (index) {
                                return '<span style="color:#00008B;font-weight:bold ">' +
                                    this.point.name + '</span>';
                            }
                        },
                        padding: 20
                    }
                },
                series: [{ //设置每小个饼图的颜色、名称、百分比  
                    type: 'pie',
                    name: null,
                    data: [{
                            name: '测试成功案例',
                            color: '#3CB371',
                            y: zccw
                        },
                        {
                            name: '测试失败案例',
                            color: '#DC143C',
                            y: sycw
                        },

                    ]
                }]
            });
        });

    });


    function showTime() {
        var $dt = document.getElementById("datetimenow"); // 得到容器对象  
        var dt = new Date(); // 得到当前时间  
        var y = dt.getFullYear(); // 当前年份  
        var m = dt.getMonth() + 1; // 当前月份，getMonth 返回值是 0-11 对应 1-12月，因此全部加1  
        if (m < 10) m = '0' + m;
        var d = dt.getDate();
        if (d < 10) d = '0' + d;

        var h = dt.getHours();
        if (h < 10) h = '0' + h;
        var i = dt.getMinutes();
        if (i < 10) i = '0' + i;
        var s = dt.getSeconds();
        if (s < 10) s = '0' + s;

        var str = y + '年' + m + '月' + d + '日 ' + h + '时' + i + '分' + s + '秒';
        $dt.innerHTML = str; // 将格式化后的内容装载到容器中  
    }
    showTime();
    setInterval("showTime()", 1000);

    function setTestTime(datetimenow) {
        var y = datetimenow.substr(0, 4); // 当前年份  
        var m = datetimenow.substr(4, 2); // 当前月份
        var d = datetimenow.substr(6, 2);
        var h = datetimenow.substr(8, 2);
        var i = datetimenow.substr(10, 2);
        var s = datetimenow.substr(12, 2);


        var str = y + '年' + m + '月' + d + '日 ' + h + '时' + i + '分' + s + '秒';
        var $dt = document.getElementById("testdatetime"); // 得到容器对象  
        $dt.innerHTML = str;
    }
    setTestTime('20180504164728');


    for (var i = 0; i < 5; i++) {

        var $li2 = $(
            ' <tr><td>Sachin</td><td>Mumbai</td><td><span class="glyphicon glyphicon-ok" aria-hnameden="true"></span></td></tr>'+
            ' <tr class="danger"><td>Tanmay</td><td>Bangalore</td><td><span class="glyphicon glyphicon-remove" aria-hnameden="true"></span></td></tr>'+
            ' <tr><td>Uma</td><td>Pune</td><td><span class="glyphicon glyphicon-ok" aria-hnameden="true"></span></td></tr>'
        );
        $('#testresult').append($li2);
    }
</script>

</html>